<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="conres">
                  <div class="ra"><h3>待付款支付通知</h3></div>
                  <div class="yuansdj">
                    <el-form ref="form" label-width="100px">
                      <el-form-item label="支付通知设置:">
                        <el-input type="textarea" v-model="descs"></el-input>
                      </el-form-item>
                    </el-form>
                    <div class="btns">
                      <el-button type="danger">保存</el-button>
                      <el-button>编辑</el-button>
                    </div>
                  </div>
                  <p>待支付订单列表</p>

                  <div class="box">
                    <div class="conem">
                      <div class="list">
                        <div class="top flex_lr">
                          <div>订单号：915426218542320</div>
                          <div>订单确认时间：2019-11-23</div>
                        </div>
                        <div class="con_u">
                          <div class="toen1">
                            <div class="topeng">
                              <div class="img_qw">
                                <img src="@/assets/img/aa.png" alt />
                              </div>
                              <div class="w250">
                                <h4>阿迪达斯</h4>
                                <div class="xpsgf">新品首发</div>
                                <p>数量:1</p>
                                <p>颜色：黑色 尺码：中号</p>
                                <p>发货时间：三天内</p>
                              </div>
                            </div>
                            <div class="dianjia">
                              <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                            </div>
                          </div>
                          <div class="toen2">
                            <div>买家</div>
                            <div>王大壮</div>
                          </div>
                          <div class="toen3">
                            <div>收货地址</div>
                            <p>王大壮</p>
                            <p>15623957281</p>
                            <p>湖北省武汉市光谷步行街尚都1-2819</p>
                          </div>
                          <div class="toen4">
                            <div>订单状态</div>
                            <div class="ww_ww">等待买家付款</div>
                          </div>
                          <div class="toen5">
                            <div>操作</div>
                            <div class="fom">
                              <div @click="xiangq()">查看详情</div>
                              <div>付款提醒</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <businessF/>
                </div>
              </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
        descs:""
      }
      
    },
    methods: {
      xiangq(){
        this.$router.push("/lkfgl4")
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.yuansdj /deep/ .el-button--primary:hover {
    background: #fdab9c;
    border-color: #fdab9c;
}
.yuansdj /deep/ .el-button--primary {
    color: #FFF;
    background-color: #ff9381;
    border-color: #ff9381;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.conres .ra h3{
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  margin-top: 15px;
  padding-bottom: 10px;
}
.yuansdj {
  width: 500px;
  margin-top: 20px;
  margin-left: 20px;
}
.btns{
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  width: 60%;
}
.conem {
  width: 890px;
  height: auto;
  margin: 0 auto;
}
.conem .list {
  width: 888px;
  height: 192px;
  /* border: 1px solid #dcdcdc; */
  margin-bottom: 15px;
}
.conem .list .top {
  height: 30px;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;







  line-height: 30px;
}
.conem .list .top div:nth-child(1) {
  padding-left: 15px;
}
.conem .list .top div:nth-child(2) {
  padding-right: 15px;
  color: #a0a0a0;
}
.conem .list .con_u {
  height: 160px;
  border-bottom: 1px solid #dcdcdc;
}
.conem .list .fom {
  display: flex;
  flex-direction:column;
  align-items: flex-end;
}
.conem .list .fom div:hover {
  color: #fff;
  background-color: #f06048;
  cursor: pointer;
}
.conem .list .fom div {
  width: 95px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 13px;
  border: solid 1px #f06048;
  margin-right: 15px;
  margin-top: 7px;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #f06048;
}
.con_u {
  display: flex;
}
.con_u .toen1 {
  width: 400px;
  border-right: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.topeng .img_qw img {
  width: 120px;
  height: 120px;
}
.topeng {
  display: flex;
  justify-content: space-between;
  margin: 10px 8px 0px 16px;
}
.topeng .w250 {
  width: 246px;
  line-height: 27px;
}
.topeng .w250 h4 {
  font-size: 18px;
}
.topeng .w250 .xpsgf {
  width: 64px;
  height: 19px;
  background-color: #e44d5e;
  border-radius: 9px;
  color: #fff;
  line-height: 19px;
  text-align: center;
}
.con_u .dianjia {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #313131;
  padding-left: 28px;
}
.con_u .dianjia img {
  width: 22px;
  height: 20px;
  position: relative;
  top: 3px;
}
.con_u .toen2 {
  width: 106px;
  border-right: 1px solid #dcdcdc;
  text-align: center;
}
.con_u .toen2 div:nth-child(1) {
  font-size: 14px;
  margin-top: 20px;
}
.con_u .toen3 div:nth-child(1) {
  font-size: 14px;
  margin-top: 20px;
}
.con_u .toen4 div:nth-child(1) {
  font-size: 14px;
  margin-top: 20px;
}
.con_u .toen5 div:nth-child(1) {
  font-size: 14px;
  margin-top: 20px;
}
.con_u .toen2 div:nth-child(2) {
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #313131;
  margin-top: 40px;
}
.con_u .toen3 {
  width: 143px;
  border-right: 1px solid #dcdcdc;
  text-align: center;
}

.con_u p { 
  font-size: 12px; 
}
.con_u .toen4 {
  width: 106px;
  border-right: 1px solid #dcdcdc;
  text-align: center;
}

.con_u .toen5 {
  width: 127px;
  text-align: center;
  border-right: 1px solid #dcdcdc;
}
.toen5 .baen {
  width: 80px;
  height: 20px;
  background-color: #f06048;
  color: #fff;
  text-align: center;
  line-height: 20px;
  margin-top: 15px;
  margin-left: 3px;
}
.ww_ww {
  color: #959595;
  font-size: 12px;
  margin-top: 32px;
}
.flex_lr{
  display: flex;
  justify-content: space-between;
}
</style>